<template>
	<view class="background">
		<image src="https://api.cst365.top/login_bkg.png" mode="widthFix" style="width: 100%; height:auto"></image>
		<view class="content">
			<view class="inputview">
				<view class="username_view">
					<image src="/static/login_user.png" class="left_icon" mode=""></image>
					<input v-model="phone" placeholder="请输入手机号" placeholder-class="input_placeholder" class="input" type="number" style="-webkit-flex: 1;flex: 1;">
					<image @click="clean('phone')" src="/static/login_clean.png" class="right_icon"></image>
				</view>
			</view>
			<view class="inputbtnview" style="margin-top: 10px;  display: flex;">
				<view class="inputview" style="display: flex; flex:1;">
					<view class="verify_view">
						<image src="/static/login_code.png" class="left_icon" mode=""></image>
						<input v-model="code" placeholder="请输入验证码" placeholder-class="input_placeholder" class="input" type="safe-password" style="-webkit-flex: 1;flex: 1;">
					</view>
				</view>
				<button @click="sendCode()" class="code_btn" type="default" :disabled="btnDis"style="margin-left: 5px; padding-top: 5px;">{{btnText}}</button>
			</view>
			<view class="enter_view">
				<button @click="codeLogin()" class="enter_btn" type="primary">登录</button>
			</view>
			<view class="other_view">
				<text class="other_text" @click="verifyLogin()">密码登录</text>
				<view class="" style="display: flex; flex:1;"></view>
				<text class="other_text" @click="register()">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {login, smsCode} from '@/api/login.js'
	
	export default {
		data() {
			return {
				phone: '',
				code:'',
				btnText:'获取验证码',
				btnDis: false,
				
			}
		},
		methods: {
			
			forgetPwd() {
				uni.navigateTo({
					url:'/pages/login/forget'
				})
			},
			
			verifyLogin() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			
			register() {
				uni.navigateTo({
					url:'/pages/login/register'
				})
			},
			
			codeLogin() {
				
				//手机号校验
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					});
					return false;
				}
				
				
				let param = {
					"state": "2", //请求方式 1：账号密码登录 2：验证码登录
					"type": "2", //类型 1：注册 2：登录 3：忘记密码 4：修改密码
					"source": "1", //来源 1：小程序 2：android 3：ios
					"mobile": this.phone, //手机号
					"password": "", //密码
					"code": this.code //验证码
				}
				login(param)
				.then(res => {
							
					if (res.code == 0) {
						uni.showToast({
							title: "登录成功",
							icon: 'none'
						});
						
						let data = res.data
						uni.setStorage({
							key: 'login',
							data: data
						})
						
						
						clearTimeout(this.timer);  //清除延迟执行
						this.timer = setTimeout(()=>{   //设置延迟执行
						
						uni.reLaunch({
							url: '/main/home/index/index'
						})},
						3000);
															
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
				.catch(e => {
					
				})
			},
			
			
			sendCode() {
				//手机号校验
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					});
					return false;
				}
				
				let parmas = {
					"type": "2", //类型 1：注册 2：登录 3：忘记密码 4：修改密码 5：修改手机号 6：更新手机号 7：报价联系人
					"mobile": this.phone //手机号
				}
							
				smsCode(parmas)
				.then(res => {
							
					if (res.code == 0) {
						uni.showToast({
							title: "验证码已发送",
							icon: 'none'
							// title: res.message
						});						
						this.countDown()										
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
				.catch(e => {
					
				})
			},
			
			// 获取验证码时，验证手机号是否正确，并且验证是否在60s后重新发送
			// 验证码倒计时
			countDown() {
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 60;
				// 按钮禁用
				this.btnDis = true;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.btnText = `验证码(${timer}s)`;
				t = setInterval(() => {
					// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.btnText = `验证码(${timer}s)`;
				}, 1000)
			},
			
			clean(type) {
				if (type == 'phone') {
					this.phone = ''
				} else if (type == 'pwd') {
					this.password = ''
				}
			},
			
		}
	}
</script>

<style>
	.verify_view {
		/* margin-top: 10px; */
		height: 100%;
		display: flex;
		flex-direction: row;
		-webkit-align-items: center;
	}
	
	.code_btn {
		width: 120px;
		background: #0E59EA;
		border-radius: 7px;
		height: 40px;
		background: #0E59EA;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}
	
	
	
	.other_view {
		margin-top: 17px;
		display: flex;
		flex-direction: row;
		-webkit-align-items: center;
	}
	
	.enter_view {
		margin-top: 40px;
	}
	
	.enter_btn {
		background: #0E59EA;
		border-radius: 7px;
		height: 45px;
		background: #0E59EA;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.forgetpsd_view {
		display: flex;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
	
	.other_text {
		color: #898989;
		font-weight: 500px;
		text-align: right;
		font-size: 14px;
	}
	
	.forget_text {
		margin-top: 11px;
		width: 100px;
		font-size: 14px;
		color: #898989;
		font-weight: 500px;
		text-align: right;
	}
	
	
	.username_view {
		height: 100%;
		display: flex;
		flex-direction: row;
		-webkit-align-items: center;
	}
	
	.password_view {
		margin-top: 10px;
		height: 100%;
		display: flex;
		flex-direction: row;
		-webkit-align-items: center;
	}
	
	.inputview {
		width: 100%;
		height: 46px;
		border-radius: 7px;
		background-color: #F4F4F4;
	}
	
	
	
	.left_icon {
		margin-left: 15px;
		width: 18px;
		height: 20px;
	}
	
	.right_icon {
		margin-right: 15px;
		width: 18px;
		height: 18px;
	}
	
	
	.input {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.input_placeholder {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}
	
	.content {
		margin: 15px;
	}

	.background {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: white;
	}
</style>
